<template>
    <section>
        <div>
            <InfoHeader title="我的地址"></InfoHeader>
            <section class="address-ul">
                <div class="address-item" v-for="(address,index) in userAddress.address" :key="index">
                    <div class="left">
                        <p>{{address.address}}</p>
                        <p>{{address.mengpai}}</p>
                        <p>{{address.name}} {{address.phone}}</p>
                    </div>
                    <div class="right">
                        <router-link :to="{name:'changeAddress',query:{address:address}}" >
                            <i class="iconfont icon-iconset0136"></i>
                        </router-link>
                    </div>
                </div>
            </section>
            <div class="add">
                <p>新增地址</p>
                <i class="iconfont icon-jiantou"></i>
            </div>
        </div>
    </section>
</template>

<script>
     import InfoHeader from '../../components/InfoHeader/InfoHeader'
     // import ChangeAddress from './ChangeAddress'
     import {mapState} from 'vuex'
    export default {
        name: "ProfileAddress",
        components:{
          InfoHeader,
        },
        data() {
            return {};
        },
        computed: {
            ...mapState(['userAddress'])
        },
        methods: {},
        created() {
        },
        mounted() {
            this.$store.dispatch('getUerAddress')
        },
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
    @import "../../common/stylus/mixins.styl"
   .header-class{
       height: 50px;
   }
   .address-item{
       box-sizing: border-box;
       padding: 10px;
       display: flex;
       justify-content: space-between;
       height:90px;
       bottom-border-1px(rgba(7, 17, 27, 0.1))
       p{
           margin: 8px 0;
       }
       p:nth-child(1){
           font-size: 18px;
           font-weight: bold;
       }
       p:nth-child(2){
           font-size: 14px;

       }
       p:nth-child(3){
           font-size: 14px;
           color: #7e8c8d;
       }
       .right{
           height: 100%;
           display: flex;
           align-items: center;
           .iconfont{
               font-size: 22px;
           }
       }
   }

   .add{
       display flex
       height 80px
       padding 10px
       justify-content space-between
       p{
           color dodgerblue
           font-size 16px
       }

   }
</style>
